import React, { Component } from 'react';
import { Collapse, Upload, Modal } from 'antd';
import { connect } from 'dva';
import UpkeepInfo from './UpkeepInfo';
import router from 'umi/router';
import classNames from 'classnames';
import DetailsList from '@/components/DetailsList';
import styles from '@/pages/Detail.less';
import { queryFileList, formatPrice } from '@/utils/common';
import { PayMethod } from './utils';
import { formatCodeVal } from '@/pages/Common/common';

const Panel = Collapse.Panel;

@connect(({ upkeep, loading, common }) => ({
  upkeep,
  loading: loading.effects['upkeep/upkeepInfoList'],
  dictObject: common.dictObject,
}))
export default class UpkeepDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: ['1', '2'],
      fileList: [],
      id: 0,
      upkeepInfoModalVisible: false,
    };
    this.paneSize = [1, 2];
  }
  componentWillReceiveProps(nextProps) {
    const { id,dispatch } = nextProps;
    if (this.props.id !== id) {
      this.setState({ id });
      this.queryFileList(id);
      dispatch({
        type: 'upkeep/upkeepInfoList',
        payload: { id },
      });
    }
  }
  componentDidMount() {
    const {
      upkeep: { detail },
      id,
      dispatch,
    } = this.props;
    if (id) {
      this.queryFileList(id);
      this.setState({ id });
      dispatch({
        type: 'upkeep/upkeepInfoList',
        payload: { id },
      });
    }
    

    // 查询字典：保养类型
    this.props.dispatch({
      type: 'common/querytDictByCode',
      payload: { code: 'upkeep-type' },
    });
    //币种：
    this.props.dispatch({
      type: 'common/querytDictByCode',
      payload: { code: 'currency-type' },
    });
  }

  queryFileList = id => {
    queryFileList({
      props: this.props,
      params: { bizId: id, fileBizType: 'UPKEEP_MANA' },
      callback: data => {
        if (!data) return;
        this.setState({ fileList: data });
      },
    });
  };

  callback = key => {
    this.setState({
      activeKey: key,
    });
  };

  upkeepInfoHandleCancel = () => {
    this.setState({ upkeepInfoModalVisible: false });
  };

  handleStandardTableChange = param => {
    const { id } = this.props;
    const { formValues } = this.state;
    const params = {
      ...formValues,
      ...param,
    };
    params.id = id;
    this.props.dispatch({
      type: 'upkeep/upkeepInfoList',
      payload: params,
    });
  };

  upkeepInfoHandleOk = () => {
    this.setState({ upkeepInfoModalVisible: true });
  };
  render() {
    const {
      list,
      type,
      upkeep: { detail, upkeepInfoList },
      loading,
      isMobile,
      dictObject,
    } = this.props;

    const { id, activeKey, upkeepInfoModalVisible, fileList } = this.state;
    const data = upkeepInfoList[id] ? upkeepInfoList[id] : {};
    const customPanelStyle = {
      borderRadius: 4,
      marginBottom: 12,
      border: 0,
      overflow: 'hidden',
    };

    const panel = detail[id];
    const totalFee = panel ? formatPrice(panel.totalFee) : '';
    const realPayFee = panel ? formatPrice(panel.realPayFee) : '';
    const currencyType = panel
      ? formatCodeVal(dictObject['currency-type'], panel.currencyType)
      : '';
    const realCurrencyType = panel
      ? formatCodeVal(dictObject['currency-type'], panel.realCurrencyType)
      : '';
    const payMethod = panel ? formatCodeVal(PayMethod, panel.payMethod) : '';
    const upkeepType = panel ? formatCodeVal(dictObject['upkeep-type'], panel.upkeepType) : '';

    const fields = [
      { key: 'upkeepNo', name: '单据号' },
      { key: 'cartPlateNo', name: '车牌号' },
      { key: 'trailerPlateNo', name: '挂车车牌号' },
      { key: 'ownCompanyName', name: '所属公司' },
      { key: currencyType, name: '应付币种', isConst: true },
      { key: totalFee, name: '应付金额', isConst: true },
      { key: realCurrencyType, name: '实付币种', isConst: true },
      { key: realPayFee, name: '实付金额', isConst: true },
      { key: upkeepType, name: '类型', isConst: true },
      { key: payMethod, name: '支付方式', isConst: true },
      { key: 'upkeepTime', name: '送保时间/维修时间' },
      { key: 'upkeepFactory', name: '保养厂/维修厂' },
      { key: 'upkeepPerson', name: '送保人/送修人' },
      { key: 'currentMileage', name: '当前里程' },
      { key: 'remarks', name: '备注' },
      { key: 'settlementDate', name: '结算周期' },
      { key: 'attachments', name: '附件', isRow: true, isFile: fileList },
    ];

    return (
      <div className={styles.CollapseDetails}>
        <Collapse activeKey={activeKey} onChange={key => this.callback(key)} bordered={false}>
          {this.paneSize.map((item, panelId) => {
            return (
              <Panel
                header={`${panelId === 0 ? '基础信息' : '明细'}`}
                key={`${panelId + 1}`}
                className={styles.customPanelStyle}
                extra={false}
              >
                {panelId === 0 && (
                  <DetailsList
                    isMobile={isMobile}
                    detilsData={{
                      fields: fields,
                      value: panel,
                      fileList: fileList,
                    }}
                  />
                )}
                {panelId === 1 && (
                  <UpkeepInfo
                    id={id}
                    data={data}
                    type="detail"
                    loading={loading}
                    visible={upkeepInfoModalVisible}
                    change={this.handleStandardTableChange}
                    handleCancel={this.upkeepInfoHandleCancel}
                    handleOk={this.upkeepInfoHandleOk}
                  />
                )}
              </Panel>
            );
          })}
        </Collapse>
      </div>
    );
  }
}
